<template>
  <div>
    <el-row>
      <el-col>
        <h1><i class="el-icon-eleme"></i> {{sysname}}</h1>

      </el-col>
    </el-row>

    <!-- 传统html页面布局,横向布局不容易实现
     新的布局方式flex支持新属性justify
     -->
    <el-row type="flex" justify="start">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toadd">新增</el-button>
    </el-row>

    <el-row>
      <el-col>
        <el-table :data="list">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="sellPoint" label="卖点"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="note" label="详情"></el-table-column>

          <el-table-column label="[操作]" width="220">
            <!-- 增加template标签,动态获取当前行的数据 -->
            <template slot-scope="sco">
              <el-button type="success" icon="el-icon-edit" @click="toupdate(sco.$index,sco.row)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" v-on:click="del(sco.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 定义对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>  <!-- 做双向绑定 关键字:model -->
        <el-form label-width="80px" :model="m">
          <el-form-item label="标题">
            <el-input v-model="m.title"></el-input>
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.sellPoint"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price"></el-input>
          </el-form-item>
          <el-form-item label="详情">
            <el-input type="textarea" v-model="m.note"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="save">确定</el-button>
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  //定义一个组件导出,data采用ES6新标准函数写法
  export default{
    name:'Item',
    data(){
      return{
        sysname:'京淘电商平台',
        dialogVisible:false,  //公用变量,修饰对话框是否展现
        isUpdate:false, //共用变量,判断是否修改的依据
        index:'', //公用变量,保存当前修改记录的索引值
        m: { //为对话框表单声明对象变量,设置初始值
          title:'', //当修改表单框内容时,这里的值随之改变,数据驱动体现
          sellPoint:'',
          price:'',
          note:''
        },
        list:[
          {
            title:'Java入门',
            sellPoint:'绝世神功',
            price:9.9,
            note:'看你骨骼清奇,是敲代码奇才'
          },
          {
            title:'Java是最好的语言',
            sellPoint:'Java就业人数最多',
            price:9.9,
            note:'赚大钱'
          }
        ]
      }
    },
    methods:{
      toadd:function(){
        //在方法区引用数据区数据,用关键字this
        this.dialogVisible=true; //展现对话框
        this.m={};  //利用js动态特点,把所有属性置空
        this.isUpdate=false;
      },
      toupdate:function(ind,row){
        /*1.把row当前值赋值给m
        2.打开对话框*/
        this.m=row;
        // this.m=JSON.parse(JSON.stringify(row));
        this.dialogVisible=true;
        this.isUpdate=true; //修改标识
        this.index=ind; //通过element-ui slot获取到当前索引值,赋值给全局变量index
      },
      del:function(ind){
        this.list.splice(ind,1);
      },
      save: function(){ //新增和修改复用这个按钮,主流开发习惯
      if(!this.isUpdate){  //新增
        //实现将m对象放入list对象中,JavaScript原生提供splice函数
        this.list.splice(0,0,this.m);
      }else{  //修改
        this.list.splice(this.index,1,this.m);
      }
        this.dialogVisible=false;
      }
    }
  }
</script>

<style>
  textarea{
    font-family:"微软雅黑";
  }
</style>
